<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .box{
      width: 980px;
      margin: 20px auto;
      overflow: hidden;
    }
    textarea{
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding-left: 10px;
      padding-top: 10px;
      outline-style: none;
      resize: none;
      box-sizing: border-box;
    }
    .user_content{
      overflow: hidden;
    }
    .user_content span,input{
      float: right;
    }
 
    .user_img img{
      float: left;
      
    }
    .msg span{
      display: block; 
     
    }
    li{
      border-bottom: 1px solid #ccc;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="box">
    <textarea name="" id="" cols="30" rows="10" maxlength="200" placeholder="说点什么..." class="textarea"></textarea>
    <div class="user_content"> 
      <input type="button" value="发布"> 
      <span class="total">/200</span>
      <span class="word_number">0</span>
    </div>
    <div class="content">
      <ul>
        <li>
          <span class="user_img"><img src="03.jpg" alt=""></span>
          <div class="msg">
            <span class="user_title">百里守约</span>
            <span class="time">作者发布于：2018-3-4 16:34:09</span>
            <span class="content_msg">内容</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <script>
    var textarea = document.querySelector('.textarea');
    var word_number = document.querySelector('.word_number');
    textarea.oninput = function(){
      if(textarea.value.length <= 200){
        word_number.innerText = textarea.value.length;
      }
    }
    //点击发布
    var btn = document.querySelector('input');
    var ul = document.querySelector('ul');
    btn.onclick = function(){
     
      var li = document.createElement('li');
      var user_img = document.createElement('span');
      user_img.className = 'user_img';
      var img = document.createElement('img');
      img.src = '03.jpg';
      user_img.appendChild(img);
      li.appendChild(user_img)
      var msg = document.createElement('div');
      msg.className = 'msg';
      var user_title = document.createElement('span');
      user_title.className = 'user_title';
      user_title.innerText = '百里守约';
      var time = document.createElement('span');
      time.className = 'time';
      time.innerText = getTime();
      var content_msg = document.createElement('span');
      content_msg.className = 'content_msg';
      content_msg.innerText = textarea.value;

      if(textarea.value.length > 0){
        textarea.value = '';
        word_number.innerText = 0;
      }else if(textarea.value.length == 0){
        alert('内容不能为空');
        return;
      }

      msg.appendChild(user_title);
      msg.appendChild(time);
      msg.appendChild(content_msg);
      li.appendChild(msg);
     
      ul.appendChild(li);
    }
    function getTime(){
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth()+1;
      var daay = date.getDate();
      var h = date.getHours();
      var m = date.getMinutes();
      var s = date.getSeconds();

      month= month >= 10 ? month : '0'+month;
      daay= daay >= 10 ? daay : '0'+daay;
      h= h >= 10 ? h : '0'+h;
      m= m >= 10 ? m : '0'+m;
      s= s >= 10 ? s : '0'+s;

      var time_str = year+'-'+month+'-'+daay+' '+h+':'+m+':'+s;
      return(time_str)
    }
  </script>
</body>
</html>